    <div class="row">
      <div class="col-12">
        <h2 class="mb-4">我的待办</h2>
      </div>
    </div>

    <div class="row mb-4">
      <div class="col-md-6 mb-3">
        <div class="card text-center">
          <div class="card-body">
            <h5 class="card-title text-warning">{{ $ctrl.getPendingCount() }}</h5>
            <p class="card-text">待完成</p>
          </div>
        </div>
      </div>
      <div class="col-md-6 mb-3">
        <div class="card text-center">
          <div class="card-body">
            <h5 class="card-title text-success">{{ $ctrl.getCompletedCount() }}</h5>
            <p class="card-text">已完成</p>
          </div>
        </div>
      </div>
    </div>

    <div class="row mb-4">
      <div class="col-12">
        <div class="card">
          <div class="card-header">
            <h5 class="mb-0">添加新待办</h5>
          </div>
          <div class="card-body">
            <form ng-submit="$ctrl.addTodo()" class="row">
              <div class="col-md-6 mb-3">
                <input type="text" class="form-control" placeholder="待办事项标题" 
                       ng-model="$ctrl.newTodo.title" required>
              </div>
              <div class="col-md-3 mb-3">
                <select class="form-control" ng-model="$ctrl.newTodo.priority" ui-select2="{placeholder: '选择优先级', allowClear: false}">
                  <option value="low">低优先级</option>
                  <option value="medium">中优先级</option>
                  <option value="high">高优先级</option>
                </select>
              </div>
              <div class="col-md-3 mb-3">
                <input type="date" class="form-control" ng-model="$ctrl.newTodo.dueDate">
              </div>
              <div class="col-12">
                <button type="submit" class="btn btn-primary">添加待办</button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col-12">
        <div class="card">
          <div class="card-header">
            <h5 class="mb-0">待办列表</h5>
          </div>
          <div class="card-body">
            <div class="table-responsive">
              <table class="table table-hover">
                <thead>
                  <tr>
                    <th width="50">状态</th>
                    <th>标题</th>
                    <th>优先级</th>
                    <th>截止日期</th>
                    <th width="100">操作</th>
                  </tr>
                </thead>
                <tbody>
                  <tr ng-repeat="todo in $ctrl.todos" ng-class="{ 'table-success': todo.completed }">
                    <td>
                      <input type="checkbox" ng-model="todo.completed" 
                             ng-change="$ctrl.toggleTodo(todo)">
                    </td>
                    <td ng-class="{ 'text-muted': todo.completed, 'text-decoration-line-through': todo.completed }">
                      {{ todo.title }}
                    </td>
                    <td>
                      <span class="badge" ng-class="$ctrl.getPriorityClass(todo.priority)">
                        {{ todo.priority === 'high' ? '高' : todo.priority === 'medium' ? '中' : '低' }}
                      </span>
                    </td>
                    <td>{{ todo.dueDate || '-' }}</td>
                    <td>
                      <button class="btn btn-sm btn-danger" ng-click="$ctrl.deleteTodo(todo.id)">
                        删除
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>